import { useEffect, useMemo } from "react";
import { Checkbox, Row, Col, Button, Popover, Input } from "antd";
import { find, findIndex } from "lodash";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import styles from "./index.module.less";

//打印项类型映射
const typeMap = {
	1: "goodsInfo",
	2: "orderInfo",
	3: "libraryInfo",
	4: "purchaseInfo",
	5: "otherInfo"
};
let addIndex = 0;

const TemplateRight = ({ currId, printArr, viewContent, updateData, updateId }) => {

	useEffect(() => {
		viewContent.map(item => {
			if (item.addIndex > addIndex) {
				addIndex = item.addIndex;
			}
		});
	}, []);

	const checkedValues = useMemo(() => {
		//商品信息选中项
		const arr = [];
		viewContent.map(item => {
			if (["orderInfo", "goodsInfo", "otherInfo", "libraryInfo", "purchaseInfo"].includes(item.type)) {
				arr.push(item.fieldName);
			}
		});
		return arr;
	}, [viewContent]);

	//新增文本框
	const handleAddText = () => {
		const arr = [...viewContent];
		const id = new Date().getTime();
		arr.push({
			type: "customTexts",
			id: id,
			value: "",
			left: 24,
			top: 24,
			width: 148,
			height: 25,
			addIndex: ++addIndex
		});
		updateId(id);
		updateData(arr);
	};

	//新增二维码框
	const handleAddQRCode = () => {
		const arr = [...viewContent];
		const id = new Date().getTime();
		arr.push({
			type: "customQrCodes",
			id: id,
			value: "http://www.zhaojiafang.com/",
			left: 24,
			top: 24,
			width: 64,
			height: 64,
			addIndex: ++addIndex
		});
		updateId(id);
		updateData(arr);
	};

	//新增条形码
	const handleAddBarCode = () => {
		const arr = [...viewContent];
		const id = new Date().getTime();
		arr.push({
			type: "customBarCodes",
			id: id,
			value: "12345678",
			left: 24,
			top: 24,
			width: 120,
			height: 62,
			addIndex: ++addIndex
		});
		updateId(id);
		updateData(arr);
	};

	const handleClickInsert1 = () => {
		const arr = [...viewContent];
		const id = new Date().getTime();
		arr.push({
			type: "table",
			id: id,
			value: "12345678",
			percentLeft: 50,
			leftHeader: "left",
			rightHeader: "right",
			data: [{ customId: id }],
			left: 24,
			top: 24,
			width: 240,
			height: 120,
			addIndex: ++addIndex
		});
		updateId(id);
		updateData(arr);
	};

	//商品信息勾选更改
	const handleGoodsChange = (e, type) => {
		if (e.target.checked) {
			const arr = [...viewContent];
			const obj = find(printArr[type], ["key", e.target.value]) || {};
			const id = new Date().getTime();
			arr.push({
				type: typeMap[obj.type],
				id: id,
				value: obj.name,
				left: 24,
				top: 24,
				width: 120,
				height: 17.5,
				fieldName: obj.key,
				addIndex: ++addIndex,
				widthMultiple: ["waveType", "externalLogisticsCompanyName"].includes(e.target.value) ? 2 : 1,
				heightMultiple: ["waveType", "externalLogisticsCompanyName"].includes(e.target.value) ? 2 : 1
			});
			updateId(id);
			updateData(arr);
		} else {
			const arr = [...viewContent];
			const index = findIndex(arr, ["fieldName", e.target.value]);
			if (index > -1) {
				if (arr[index].id == currId) {
					updateId(undefined);
				}
				arr.splice(index, 1);
				updateData(arr);
			}
		}
	};

	const newGoodsInfoList = printArr?.goodsInfoList?.filter(item => !['商品编码行', '商品数量行', '款式编码行'].includes(item.name.slice(0, 5)));

	return (
		<div style={{ display: "flex", flexDirection: "column" }}>
			<div style={{ marginBottom: "16px" }}>
				<SubTitle title={"打印项目"} as="s2" symbol />
			</div>
			<div className={styles.operaWrapRight}>
				<h4>自定义信息</h4>
				<div className={styles.flexBox}>
					<div className={styles.flexItem}>
						<Button onClick={handleAddText}>新增文本框</Button>
					</div>
					<div className={styles.flexItem}>
						<Button onClick={handleAddQRCode}>新增二维码</Button>
					</div>
					<div className={styles.flexItem}>
						<Button onClick={handleAddBarCode}>新增条码</Button>
					</div>
					<div className={styles.flexItem}>
						<Button onClick={handleClickInsert1}>插入表格</Button>
					</div>
				</div>
				<Checkbox.Group value={checkedValues}>
					<h4 style={{ margin: "16px 0 12px 0" }}>商品信息</h4>
					<Row>
						{printArr?.goodsInfoList &&
							newGoodsInfoList.filter(item => !(item.name.indexOf('商品编码行') > -1 || item.name.indexOf('商品数量行') > -1)).map(item => (
								<Col span={8} key={item.key}>
									{item.desc ? (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "goodsInfoList")}>
											<Popover content={<div style={{ width: "150px" }}>{item.desc}</div>}>
												<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
													{item.name}
												</a>
											</Popover>
										</Checkbox>
									) : (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "goodsInfoList")}>
											<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
												{item.name}
											</a>
										</Checkbox>
									)}
								</Col>
							))}
					</Row>
					<h4 style={{ margin: "16px 0 12px 0" }}>订单信息</h4>
					<Row>
						{printArr?.orderInfoList &&
							printArr.orderInfoList.map(item => (
								<Col span={8} key={item.key}>
									{item.desc ? (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "orderInfoList")}>
											<Popover content={<div style={{ width: "150px" }}>{item.desc}</div>}>
												<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
													{item.name}
												</a>
											</Popover>
										</Checkbox>
									) : (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "orderInfoList")}>
											<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
												{item.name}
											</a>
										</Checkbox>
									)}
								</Col>
							))}
					</Row>
					<h4 style={{ margin: "16px 0 12px 0" }}>入库单信息</h4>
					<Row>
						{printArr.libraryInfoList &&
							printArr.libraryInfoList.map(item => (
								<Col span={8} key={item.key}>
									{item.desc ? (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "libraryInfoList")}>
											<Popover content={<div style={{ width: "150px" }}>{item.desc}</div>}>
												<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
													{item.name}
												</a>
											</Popover>
										</Checkbox>
									) : (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "libraryInfoList")}>
											<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
												{item.name}
											</a>
										</Checkbox>
									)}
								</Col>
							))}
					</Row>
					<h4 style={{ margin: "16px 0 12px 0" }}>采购单信息</h4>
					<Row>
						{printArr.purchaseInfoList &&
							printArr.purchaseInfoList.map(item => (
								<Col span={8} key={item.key}>
									{item.desc ? (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "purchaseInfoList")}>
											<Popover content={<div style={{ width: "150px" }}>{item.desc}</div>}>
												<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
													{item.name}
												</a>
											</Popover>
										</Checkbox>
									) : (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "purchaseInfoList")}>
											<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
												{item.name}
											</a>
										</Checkbox>
									)}
								</Col>
							))}
					</Row>
					<h4 style={{ margin: "16px 0 12px 0" }}>其他信息</h4>
					<Row>
						{printArr.otherInfoList &&
							printArr.otherInfoList.map(item => (
								<Col span={8} key={item.key}>
									{item.desc ? (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "otherInfoList")}>
											<Popover content={<div style={{ width: "150px" }}>{item.desc}</div>}>
												<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
													{item.name}
												</a>
											</Popover>
										</Checkbox>
									) : (
										<Checkbox value={item.key} onChange={e => handleGoodsChange(e, "otherInfoList")}>
											<a title={item.name} className="textOverflowMultiOne" style={{ color: "#4F5E70" }}>
												{item.name}
											</a>
										</Checkbox>
									)}
								</Col>
							))}
					</Row>
				</Checkbox.Group>
			</div>
		</div>
	);
};

export default TemplateRight;
